import React from 'react';
import { Select, Slider, Space, Divider, Typography } from 'antd';

const { Text } = Typography;
const { Option } = Select as any;

interface LineStyleOptions {
  borderWidth: number;
  tension: number;
  dashed: boolean;
}

interface MarkerOptions {
  pointRadius: number;
}

interface Props {
  visible: boolean;
  lineStyleOptions: LineStyleOptions;
  setLineStyleOptions: (opts: LineStyleOptions) => void;
  markerOptions: MarkerOptions;
  setMarkerOptions: (opts: MarkerOptions) => void;
}

const LineStyleControls: React.FC<Props> = ({
  visible,
  lineStyleOptions,
  setLineStyleOptions,
  markerOptions,
  setMarkerOptions,
}) => {
  if (!visible) return null;
  return (
    <>
      <Divider type="vertical" />
      <Text type="secondary">折线样式</Text>
      <Space size={8}>
        <Text type="secondary">线宽</Text>
        <div style={{ width: 80 }}>
          <Slider min={1} max={6} step={1} value={lineStyleOptions.borderWidth}
            onChange={(v: number) => setLineStyleOptions({ ...lineStyleOptions, borderWidth: v })} />
        </div>
        <Text type="secondary">平滑</Text>
        <div style={{ width: 100 }}>
          <Slider min={0} max={0.6} step={0.1} value={lineStyleOptions.tension}
            onChange={(v: number) => setLineStyleOptions({ ...lineStyleOptions, tension: v })} />
        </div>
        <Select size="small" value={lineStyleOptions.dashed ? 'dashed' : 'solid'} style={{ width: 90 }}
          onChange={(val) => setLineStyleOptions({ ...lineStyleOptions, dashed: val === 'dashed' })}>
          <Option value="solid">实线</Option>
          <Option value="dashed">虚线</Option>
        </Select>
      </Space>
      <Divider type="vertical" />
      <Text type="secondary">标记</Text>
      <Space size={8}>
        <Text type="secondary">大小</Text>
        <div style={{ width: 80 }}>
          <Slider min={0} max={12} step={1} value={markerOptions.pointRadius}
            onChange={(v: number) => setMarkerOptions({ ...markerOptions, pointRadius: v })} />
        </div>
      </Space>
    </>
  );
};

export default LineStyleControls;


